// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';

// VueRouter可以作为构造函数进行使用
// 创建一个路由器
const router = new VueRouter({
    // 其中路由器是对一堆路由的管理，而路由对应的就是请求路径和组件
    routes: [
        // 一级路由
        {
            name: 'about',// 命名路由，就是给路由起名称
            path: '/about',
            component: About // About组件
        },
        {
            path: '/home',
            component: Home, // Home组件
            // 二级路由
            children: [
                {
                    // 二级路由不必再写请求路径/，底层会默认帮忙写上的
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                    // 三级路由
                    children: [
                        {
                            name: 'detail',// 命名路由，就是给路由起名称
                            path: 'detail/:id/:title',
                            component: Detail,

                            // // 1、props的第一种写法，值为对象。使用少，因为传递的是死数据。
                            // // 该对象中的所有key-valye都会以props 的形式传给Detail组件（写在此处用在此处）。
                            // props: {
                            //     name: '张三',
                            //     age: 18,
                            // }

                            // // 2、props的第二种写法，值为布尔值
                            // // 若布尔值为真的话，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
                            // props: true,

                            // 3、props的第三种写法，值为函数
                            // 函数返回值必须是对象，且该函数返回值，是将所有的key-value也会以props的形式传递给Detail组件
                            // props: function ($route) { // 该函数是一个回调函数，我们定义的，但是我们不调用，最终执行了，vue-router调用的
                            //     return {
                            //         id: $route.params.id,
                            //         title: $route.params.title,
                            //     }
                            // },

                            // // 也可以使用解构赋值形式
                            // props: function ({params}) { // 该函数是一个回调函数，我们定义的，但是我们不调用，最终执行了，vue-router调用的
                            //     return {
                            //         id: params.id,
                            //         title: params.title,
                            //     }
                            // },

                            // 也可以使用解构赋值形式连续写法
                            props: function ({ params: { id, title } }) { // 该函数是一个回调函数，我们定义的，但是我们不调用，最终执行了，vue-router调用的
                                return {
                                    id: id,
                                    title: title,
                                }
                            },

                        }
                    ]
                }
            ]
        }
    ]
});

// 暴露创建的路由
export default router;